<template>
    <!-- 对话框表单 -->
    <!-- 建议使用 Prettier 格式化代码  -->
    <!-- el-form 内可以混用 el-form-item、FormItem、ba-input 等输入组件 -->
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="['Add', 'Edit'].includes(baTable.form.operate!)"
        @close="baTable.toggleForm"
        width="50%"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ baTable.form.operate ? t(baTable.form.operate) : '' }}
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <div
                class="ba-operate-form"
                :class="'ba-' + baTable.form.operate + '-form'"
                :style="config.layout.shrink ? '':'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
            >
                <el-form
                    v-if="!baTable.form.loading"
                    ref="formRef"
                    @submit.prevent=""
                    @keyup.enter="baTable.onSubmit(formRef)"
                    :model="baTable.form.items"
                    :label-position="config.layout.shrink ? 'top' : 'right'"
                    :label-width="baTable.form.labelWidth + 'px'"
                    :rules="rules"
                >
                    <FormItem :label="t('goods.freight.template_name')" type="string" v-model="baTable.form.items!.template_name" prop="template_name" :placeholder="t('Please input field', { field: t('goods.freight.template_name') })" />
                    <FormItem :label="t('goods.freight.template_type')" type="radio" v-model="baTable.form.items!.template_type" prop="template_type" :data="{ content: {1:'买家承担运费',2:'卖家包邮'} }" :placeholder="t('Please select field', { field: t('goods.freight.template_type') })" />
                    <FormItem :label="t('goods.freight.template_freight_type')" type="radio" v-model="baTable.form.items!.template_freight_type" prop="template_freight_type" :data="{ content: {1:'按件数',2:'按重量',3:'按体积'} }" :placeholder="t('Please select field', { field: t('goods.freight.template_freight_type') })" />
                    <FormItem :label="t('goods.freight.is_default')" type="switch" v-model="baTable.form.items!.is_default" prop="is_default" />

                    <div>
                        <table class="table" id="table">
                              <tr>
                                  <th>可配送区域</th>
                                  <th>首件(个)</th>
                                  <th>运费(元)</th>
                                  <th>续件(个)</th>
                                  <th>续费费(元)</th>
                              </tr>
                              <tr v-for="(item,index) in data">
                                  <td width="50%">
                                     <p>{{ item.area == ''?'选择可配送区域': item.area }}</p>
                                     <p style="text-align: right;">
                                        <el-link :underline="false" type="danger" @click="del(index)">删除</el-link>
                                        &nbsp;
                                        <el-link :underline="false" type="primary" @click="tan(index)">编辑</el-link>
                                     </p>

                                  </td>
                                  <td>
                                     <el-input v-model="item.shou" style="text-align: center;"/>
                                  </td>
                                  <td>
                                     <el-input v-model="item.shou_price"/>
                                  </td>
                                  <td>
                                     <el-input v-model="item.xu"/>
                                  </td>
                                  <td>
                                     <el-input v-model="item.xu_price"/>
                                  </td>
                              </tr>
                              <tr>
                                 <td colspan="5">
                                        <el-button type="primary" size="small" @click="addnew">添加可配送区域和运费</el-button>
                                 </td>
                              </tr>
                        </table>    
                    </div>
                </el-form>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.toggleForm()">{{ t('Cancel') }}</el-button>
                <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
                    {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? t('Save and edit next item') : t('Save') }}
                </el-button>
            </div>
        </template>
    </el-dialog>


            <el-dialog
            v-model="dialogVisible"
            title="选择可配送区域"
            width="850"
        >
            <div class="areabox" style="margin-bottom: 15px;">
                    <div style="margin-bottom:10px;float:left;width: 100%;">
                        <el-alert title="不配送的区域请取消勾选" type="error" :closable = "false"/>
                        <p style="font-size:12px;padding-top: 7px;">
                            已选 ： {{ data[current_dex].area!=null && data[current_dex].area!='' ? data[current_dex].area : '全部地区' }}
                        </p>
                    </div>
                    <div class="area">
                        <el-scrollbar height="400px">
                            <div :class="allarea_dex.sheng == index?'aline aline2':'aline'" v-for="(item,index) in sheng"><el-checkbox  @change="xuan($event,index,1)" :label="item.areaname" :value="item.areaname"  v-model="item.chk"/> <span @click="tan(current_dex,item.areaid,1,index)">展开</span></div>
                        </el-scrollbar>
                    </div>
                    <div class="area" v-loading="load2">
                        <el-scrollbar height="400px" v-if="allarea_dex.sheng>=0">
                            <div :class="allarea_dex.shi == index?'aline aline2':'aline'" v-for="(item,index) in sheng[allarea_dex.sheng].child"><el-checkbox @change="xuan($event,index,2)" :label="item.areaname" :value="item.areaname" v-model="item.chk"/> <span @click="tan(current_dex,item.areaid,2,index)">展开</span></div>
                        </el-scrollbar>
                    </div>
                    <div class="area" v-loading="load3">
                        <el-scrollbar height="400px" v-if="allarea_dex.shi>=0">
                            <div :class="allarea_dex.qu == index?'aline aline2':'aline'" v-for="(item,index) in sheng[allarea_dex.sheng].child[allarea_dex.shi].child"><el-checkbox @change="xuan($event,index,3)"  :label="item.areaname" :value="item.areaname" v-model="item.chk"/></div>
                        </el-scrollbar>
                    </div>
            </div>
            <template #footer>
            <div class="dialog-footer" style="margin-top: 15rpx;">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="que_xuan(0)">
                确定
                </el-button>
            </div>
            </template>
        </el-dialog>



</template>

<script setup lang="ts">
import type { FormInstance, FormItemRule } from 'element-plus'
import { inject, reactive, ref,watch } from 'vue'
import { useI18n } from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'
import { useConfig } from '/@/stores/config'
import type baTableClass from '/@/utils/baTable'
import { buildValidatorData } from '/@/utils/validate'
import createAxios from "/@/utils/axios";

const config = useConfig()
const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass
const data = ref([{"area":"","shou":1,"shou_price":"","xu":1,"xu_price":""}]);
const sheng = ref([])
const shi = ref([])
const qu = ref([])
const allarea_dex = ref([{'sheng':-1,"shi":-1,"qu":-1}])
const current_dex = ref(0)
const dialogVisible = ref(false)
const { t } = useI18n()
const load2 = ref(false)
const load3 = ref(false)
const rules: Partial<Record<string, FormItemRule[]>> = reactive({
    template_type: [buildValidatorData({ name: 'required', title: t('goods.freight.template_type') })],
})

watch(
    () => baTable.form.operate!, // 监听operate 以此判断编辑或者新增或其他 
    (newVal) => {
        if(newVal == 'Edit'){
           setTimeout(function(){
            console.log(baTable.form.items)
             data.value = baTable.form.items!.area
           },1000)
        }

    },
    { deep: true }
)

const addnew = ()=>{
    data.value.push(
        {"area":"","shou":1,"shou_price":"","xu":1,"xu_price":""}
    );
}
const del = (dex=-1)=>{
    var ln = data.value.length
    if(ln == 1){
        data.value[0].area = ''
         return
    }
    data.value.splice(dex,1)
}
const que_xuan = (show = 0) =>{
    console.log(sheng.value)
    var arr = []
    var all_sheng_xuan = 0
    var arr_d = ""
    for(var i = 0;i<sheng.value.length;i++){
           if(sheng.value[i].chk){
               arr.push(sheng.value[i].areaname+'(全部区域)')
               arr_d += sheng.value[i].areaname+'(all)'
               all_sheng_xuan++
           }else{
               var child = sheng.value[i].child //city
               if(child!=null){
                        var arr2 = []
                        var g1 = 0
                        var all_ziji_xuan = 0  //市县有没有一个选中的
                        var arr_d_zi = ''
                        for(var j=0;j<child.length;j++){
                                if(child[j].chk){
                                    arr2.push(child[j].areaname)
                                    all_ziji_xuan++
                                    arr_d_zi += '{'+child[j].areaname+'}'
                                }else{
                                    g1++
                                    var child2 = sheng.value[i].child[j].child //xian
                                    if(child2!=null){
                                            var g2 = 0
                                            var gs = []
                                            var add_d_zi_zi = ''
                                            for(var g=0;g<child2.length;g++){
                                                if(child2[g].chk){
                                                    gs.push(child2[g].areaname)
                                                    all_ziji_xuan++
                                                    add_d_zi_zi += '#'+child2[g].areaname+'#'
                                                }else{
                                                    g2++
                                                }
                                            }
                                            if(g2!=child2.length){
                                                    arr2.push(child[j].areaname+'['+gs.join("，")+']')
                                                    arr_d_zi+= child[j].areaname+'['+add_d_zi_zi+']'
                                            }

                                    }
                                }
                        }
                        if(all_ziji_xuan){
                            arr.push(sheng.value[i].areaname + '('+arr2.join("，")+')')
                            arr_d += sheng.value[i].areaname+'('+arr_d_zi+')'
                        }
                        
               }
           }
    }

    if(all_sheng_xuan == sheng.value.length){
        var str = '全部地区'  
        var arr_d = '全部地区'
    }else{
        var str = arr.join("，")
    }
    if(show == 0){
        dialogVisible.value = false
    }
    data.value[current_dex.value].area = str
    data.value[current_dex.value].area_v = arr_d
    
    baTable.form.items!.area = data.value;
}
//
const xuan = (e , dex=-1 , type=0) => {
        if(type == 1){
              var child = sheng.value[dex].child
              if(child!=null){
                    for(var i=0;i<child.length;i++){
                            child[i].chk = e
                    }
              }
              if(allarea_dex.value.shi >= 0){
                    for(var i=0;i<sheng.value[allarea_dex.value.sheng].child[allarea_dex.value.shi].child.length;i++){
                        sheng.value[allarea_dex.value.sheng].child[allarea_dex.value.shi].child[i].chk = e
                    }
              }    
        }
        if(type == 2){
              var child = sheng.value[allarea_dex.value.sheng].child[dex].child
              if(child!=null){
                    for(var i=0;i<child.length;i++){
                            child[i].chk = e
                    }
              }
              
                var child_2 = sheng.value[allarea_dex.value.sheng].child
                var ln2 = child_2.length
                var j= 0;
                for(var i=0;i<ln2;i++){
                    if(child_2[i].chk){
                        j++
                    }
                }
                sheng.value[allarea_dex.value.sheng].chk =  (ln2==j)?true:false

        } // plan  113269    zntb -37753   39600
        if(type == 3){
            var child = sheng.value[allarea_dex.value.sheng].child[allarea_dex.value.shi].child
            var ln = child.length
            var j= 0;
            for(var i=0;i<ln;i++){
                 if(child[i].chk){
                     j++
                 }
            }
            sheng.value[allarea_dex.value.sheng].child[allarea_dex.value.shi].chk = (ln==j)?true:false

            var child_2 = sheng.value[allarea_dex.value.sheng].child
            var ln2 = child_2.length
            var j= 0;
            for(var i=0;i<ln2;i++){
                 if(child_2[i].chk){
                     j++
                 }
            }
            sheng.value[allarea_dex.value.sheng].chk =  (ln2==j)?true:false


            console.log(ln,"ssssssssssss") //
        }


        que_xuan(1)
}

const tan = (dex=-1,pid=0,type = 0,this_dex = -1)=>{
    current_dex.value = dex
    dialogVisible.value = true
   
    
    if(type == 1 && sheng.value[this_dex].child!=null){
           allarea_dex.value.sheng = this_dex
           allarea_dex.value.shi = -1
           xuan(sheng.value[this_dex].chk,this_dex,1)
           return;
    }
    if(type == 2 && sheng.value[allarea_dex.value.sheng].child[this_dex].child!=null){
           allarea_dex.value.shi = this_dex
           xuan(sheng.value[allarea_dex.value.sheng].child[this_dex].chk,this_dex,2)
           return;
    }
    if(type == 1){
        load2.value = true
    }
    if(type == 2){
        load3.value = true
    }
    return createAxios({
        url: '/admin/goods.Goods/getArea',
        method: 'get',
        params:{"pid":pid}
    }).then(res => {
         if(pid == 0){
             sheng.value = res.data.list
             allarea_dex.value = [{'sheng':-1,"shi":-1,"qu":-1}]
         }
         if(type == 1){
              allarea_dex.value.sheng = this_dex
              allarea_dex.value.shi = -1
              sheng.value[this_dex].child = res.data.list
              qu.value = []
              xuan(sheng.value[this_dex].chk,this_dex,1)    
         }
         if(type == 2){
              allarea_dex.value.shi = this_dex
              sheng.value[allarea_dex.value.sheng].child[this_dex].child = res.data.list
              xuan(sheng.value[allarea_dex.value.sheng].child[this_dex].chk,this_dex,2)
         }
         load2.value = false
         load3.value = false

    })
}
</script>
<style>
#table .el-input__inner{
    text-align: center;
}
</style>
<style scoped lang="scss">
.aa{
   height: 90vh !important;
}
.table{
     border:1px solid #eee;
     width: 100%;
     font-size:12px;
     border-collapse: collapse; /* 合并边框，消除间隙 */
}
.table th{
    border: 1px solid #eee; padding: 10px;
}
.table td{
    border: 1px solid #eee;
    padding: 10px;
}
h4{
    margin-top:40px;
    margin-bottom: 10px;
}
.areabox{
    width: 100%;
    float: left;
}
.area{
    width: 32.3%;
    float: left;
    border:1px solid #eee;
    margin-right: 6px;
    height: 420px;
    border-radius: 4px;
}
.aline{
    width: 100%;
    position: relative;
    float: left;
    margin-bottom: 8px;
    padding-left: 20px;
}
.aline2{
    background-color: #e3e3e3;
    color:#fff
}
 
.aline span{
   position: absolute;
   right:15px;
   top:9px;
   font-size: 12px;
   cursor: pointer;
}
.aline span:hover{
    color: #ff0000;
}
</style>

